import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Card, Modal, message, Tabs, Icon, Button, Pagination, Spin } from 'antd';
import styles from './index.less';
import CropperModal from './CropperModal';
import CutpicModal from './CutpicModal';

const { TabPane } = Tabs;

@connect(state => ({
  visible: state.album.visible,
  qiniucloud: state.qiniucloud,
  currentKey: state.album.currentKey,
}))

export default class AlbumModal extends PureComponent {
  state = {
    choosen: [],
    nicaiCrx: null,
    itemList: [],
    pagination: {
      pageSize: 12,
      current: 1,
      total: 0,
    },
    loading: true,
    version: '',
    activeKey: 'album',
    // firstUrl: '',
    categoryList: [],
    // categoryId: null,
    timeout: null,
  }
  componentDidMount() {
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.k === nextProps.currentKey) {
      if (!this.props.visible && nextProps.visible) {
        if (nextProps.k === 'material') {
          this.setState({
            activeKey: 'upload',
          });
        } else {
          this.setState({
            activeKey: 'album',
          });
        }
        const nicaiCrx = document.getElementById('nicaiCrx');
        nicaiCrx.addEventListener('setAlbum', this.setAlbum);
        nicaiCrx.addEventListener('uploadResult', this.uploadResult);
        // nicaiCrx.addEventListener('setAlbumCategory', this.setAlbumCategory);
        nicaiCrx.addEventListener('setVersion', this.setVersion);
        if (!this.state.nicaiCrx) {
          this.setState({ nicaiCrx }, () => {
            setTimeout(() => {
              this.handleGetVersion();
            }, 600);
          });
        }
        const timeout = setTimeout(() => {
          if (!this.state.version) {
            message.destroy();
            message.warn('请安装尼采创作平台插件！', 60 * 60);
            this.setState({ loading: false });
          }
        }, 5000);
        this.setState({
          timeout,
        });
        document.ondragover = (e) => {
          e.preventDefault();
        }
        document.ondrop = (e) => {
          if (!(e.target.nodeName === "INPUT" && e.target.type === 'file')) {
            e.preventDefault();
          }
        }
      } else if (this.props.visible && !nextProps.visible) {
        const { nicaiCrx } = this.state;
        nicaiCrx.removeEventListener('setAlbum', this.setAlbum);
        nicaiCrx.removeEventListener('uploadResult', this.uploadResult);
        // nicaiCrx.removeEventListener('setAlbumCategory', this.setAlbumCategory);
        this.setState({
          nicaiCrx: null,
        });
        this.handleClearInp();
        document.ondragover = null;
        document.ondrop = null;
        if (this.state.timeout) {
          clearTimeout(this.state.timeout);
        }
      }
    }
  }
  setAlbum = (e) => {
    const data = JSON.parse(e.target.innerText);
    if (!data.error) {
      if (data.current === 1 && data.itemList.length > 0) {
        // this.setState({
        //   firstUrl: data.itemList[0].url,
        // });
      }
      this.setState({
        itemList: data.itemList || [],
        pagination: {
          pageSize: data.pageSize,
          current: data.current,
          total: data.total,
        },
        loading: false,
      });
    } else {
      message.warn(data.msg);
      this.setState({
        loading: false,
      });
    }
  }
  // setAlbum = (e) => {
  //   const result = JSON.parse(e.target.innerText);
  //   if (!result.errorCode) {
  //     const { data } = result;
  //     if (data.current === 1 && data.itemList.length > 0) {
  //       this.setState({
  //         firstUrl: data.itemList[0].url,
  //       });
  //     }
  //     this.setState({
  //       itemList: data.itemList || [],
  //       pagination: {
  //         pageSize: data.pageSize,
  //         current: data.current,
  //         total: data.total,
  //       },
  //       loading: false,
  //     });
  //   } else {
  //     message.warn(result.message);
  //     this.setState({
  //       loading: false,
  //     });
  //   }
  // }
  setVersion = (e) => {
    const data = JSON.parse(e.target.innerText);
    if (this.props.k === this.props.currentKey) {
      if (data.version) {
        this.setState({
          version: data.version,
        });
      }
      this.state.nicaiCrx.removeEventListener('setVersion', this.setVersion);
      const { pagination } = this.state;
      if (data.error) {
        message.warn(data.msg);
        this.setState({
          loading: false,
        });
      } else {
        this.handleLoadAlbum({ pageSize: pagination.pageSize, current: 1 });
        // this.handleGetAlbumCategory();
      }
    }
  }
  uploadResult = (e) => {
    const result = JSON.parse(e.target.innerText);
    if (this.props.k === this.props.currentKey) {
      if (!result.errorCode && result.data) {
        const choosen = [...this.state.choosen];
        choosen.splice(result.index, 1, result.data[0]);
        this.setState({
          choosen,
        });
      } else {
        message.error(result.message);
        this.setState({choosen: [{err: true}]})
      }
    }
  }
  handleRequestNicaiCrx = (params) => {
    this.state.nicaiCrx.innerText = JSON.stringify(params);
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('taobaoRequest', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
  }
  // handleGetAlbumCategory = () => {
  //   this.handleRequestNicaiCrx({
  //     url: 'https://resource.taobao.com/category/query?resourceType=Pic',
  //     type: 'GET',
  //     actionName: 'setAlbumCategory'
  //   });
  // }
  handleGetAlbum = (params) => {
    this.handleRequestNicaiCrx({
      url: 'https://resource.taobao.com/resource/query',
      type: 'GET',
      data: {
        q: '',
        __version__: '3.0',
        resourceType: 'Pic',
        ...params,
      },
      actionName: 'setAlbum',
    });
  }
  // setAlbumCategory = (e) => {
  //   const result = JSON.parse(e.target.innerText);
  //   if (!result.errorCode && result.data.itemList) {
  //     this.setState({
  //       categoryList: result.data.itemList,
  //     });
  //     this.handleGetAlbum({ pageSize: this.state.pagination.pageSize, current: 1 });
  //   } else {
  //     message.warn(result.message);
  //     this.setState({
  //       loading: false,
  //     });
  //   }
  // }
  handleLoadAlbum = (params) => {
    this.state.nicaiCrx.innerText = JSON.stringify(params);
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('getAlbum', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
  }
  handleGetVersion = () => {
    this.state.nicaiCrx.innerText = '';
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('getVersion', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
  }
  handleOk = () => {
    if (this.state.choosen.length > 0) {
      if (this.props.minSize) {
        this.props.dispatch({
          type: 'album/showCropper',
          payload: {
            visible: true,
            src: this.state.choosen[0].url,
            width: this.props.minSize.width,
            height: this.props.minSize.height,
            picHeight: this.state.choosen[0].picHeight,
            picWidth: this.state.choosen[0].picWidth,
            cropperKey: this.props.currentKey,
          }
        });
        this.setState({ choosen: [] });
      } else {
        if (this.props.onOk) this.props.onOk(this.state.choosen);
        this.setState({ choosen: [] });
      }
    }
    this.props.dispatch({
      type: 'album/hide',
    });
  }
  handleCancel = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'album/hide',
    });
    message.destroy();
    this.setState({ choosen: [] });
  }
  handleChoose = (photo) => {
    const { mode } = this.props;
    if (mode === 'single') {
      this.setState({ choosen: [photo] });
    } else {
      const index = this.state.choosen.findIndex(item => item.id === photo.id);
      if (index === -1) {
        this.setState({ choosen: [...this.state.choosen, { ...photo, uid: photo.id }] });
      } else {
        const choosed = [...this.state.choosen];
        choosed.splice(index, 1);
        this.setState({ choosen: [...choosed] });
      }
    }
  }
  previewPhoto = (photo, index) => {
    if (photo && photo.url) {
      return (
        <div className={styles.previewImg} key={index}>
          <img alt="图片" src={photo.url} />
        </div>
      );
    } else {
      if(!photo.err) {
        return (
          <div key={index}>
            <Spin className={styles.previewImg} />
          </div>
        );
      }

    }
  }
  changeTab = (e) => {
    const { pagination } = this.state;
    this.setState({
      activeKey: e,
    });
    if (e === 'album') {
      this.handleLoadAlbum({ pageSize: pagination.pageSize, current: pagination.current });
      // this.handleGetAlbum({ pageSize: pagination.pageSize, current: pagination.current });
      this.handleClearInp();
    }
    this.setState({ choosen: [] });
  }
  changeAlbumPage = (current, pageSize) => {
    if (this.state.nicaiCrx) {
      this.setState({ loading: true });
      this.handleLoadAlbum({ pageSize, current });
      // this.handleGetAlbum({ pageSize, current });
    }
  }
  handleUpload = (e) => {
    const { minSize } = this.props;
    const file = e.target.files[0];
    if (file) {
      if (file.size / 1024 / 1024 >= 3) {
        message.warn('上传图片最大3M');
      } else if (this.props.maxSize && file.size / 1024 / 1.024 > this.props.maxSize) {
        message.warn('请上传符合要求大小的图片');
      } else {
        const reader = new FileReader();
        reader.readAsDataURL(file); //  监听文件读取结束后事件
        reader.onloadend = (e1) => {
          if (minSize) {
            const img = new Image();
            img.src = e1.target.result;
            img.onload = () => {
              if (img.height < minSize.height || img.width < minSize.width) {
                message.warn(`图片尺寸不能小于${minSize.width}*${minSize.height}px`);
              } else {
                this.handleSubmitImg(e1.target.result);
              }
            };
          } else {
            this.handleSubmitImg(e1.target.result);
          }
        };
      }
    }
  }
  handleSubmitImg = (url) => {
    const request = { data: url, index: this.state.choosen.length };
    if (this.props.mode === 'single') {
      request.index = 0;
    }
    this.state.nicaiCrx.innerText = JSON.stringify(request);
    const customEvent = document.createEvent('Event');
    customEvent.initEvent('uploadImg', true, true);
    this.state.nicaiCrx.dispatchEvent(customEvent);
    if (this.props.mode === 'single') {
      this.setState({
        choosen: [],
      });
    } else {
      this.setState({
        choosen: [...this.state.choosen, {}],
      });
    }
  }
  handleToCropper = () => {
    if (this.props.minSize) {
      this.handleOk();
    } else {
      this.props.dispatch({
        type: 'album/showCropper',
        payload: {
          visible: true,
          src: this.state.choosen[0].url,
          width: 0,
          height: 0,
          picHeight: this.state.choosen[0].picHeight,
          picWidth: this.state.choosen[0].picWidth,
          cropperKey: this.props.currentKey,
        }
      });
      this.setState({ choosen: [] });
      this.props.dispatch({
        type: 'album/hide',
      });
    }
  }
  handleToCutpic = () => {
    this.props.dispatch({
      type: 'album/showCutpic',
      payload: {
        cutpicKey: this.props.currentKey,
        src: this.state.choosen[0].url,
      }
    });
    // this.props.dispatch({
    //   type: 'album/hide',
    // });
  }
  handleCropperOk = (img) => {
    if (this.props.onOk) this.props.onOk([img]);
  }
  handleCutpicOk = (img) => {
    const { pagination } = this.state;
    this.setState({ choosen: [img] });
    this.handleLoadAlbum({ pageSize: pagination.pageSize, current: 1 });
    // this.handleGetAlbum({ pageSize: pagination.pageSize, current: 1 });
  }
  handleGetBase64 = (img) => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0, img.width, img.height);
    // const ext = img.src.substring(img.src.lastIndexOf('.')+1).toLowerCase();
    const dataURL = canvas.toDataURL();
    return dataURL;
  }
  handleClearInp = () => {
    if (this.fileInp) {
      this.fileInp.value = '';
    }
  }
  handleChangeAlbumMenu = (e) => {
    const { pagination, categoryList } = this.state;
    if (e && e.key) {
      // this.setState({
      //   categoryId: categoryList[e.key].id
      // });
      const params = {
        pageSize: pagination.pageSize,
        current: 1,
      };
      if (categoryList[e.key].id !== null) {
        params.categoryId = categoryList[e.key].id;
      }
      this.handleGetAlbum(params);
    }
  }
  renderPhoto = (photo, index) => {
    const { minSize, k } = this.props;
    return (
      <Card style={{ width: 140, display: 'inline-block', margin: 5 }} bodyStyle={{ padding: 0 }} key={index}>
        <div className={styles.customImageBox} onClick={() => this.handleChoose(photo)}>
          <img
            alt="图片"
            className={styles.customImage}
            width="100%"
            src={photo.url}
          />
          <div style={{ display: this.state.choosen.find(item => item.id === photo.id) ? 'block' : 'none' }} className={styles.chooseModal}>
            <Icon type="check" />
          </div>
        </div>
        { k !== 'editor' && minSize && (photo.picWidth < minSize.width || photo.picHeight < minSize.height) &&
          <div className={styles.diabledModal}>
            尺寸不符
          </div>
        }
        <div className="custom-card">
          <p className={styles.customNodes}>{photo.picWidth} * {photo.picHeight}</p>
          <p className={styles.customNodes}>{photo.title}</p>
        </div>
      </Card>
    );
  }
  render() {
    const { visible, k, currentKey } = this.props;
    const { choosen, itemList, pagination, loading } = this.state;
    return (
      <div>
        <Modal
          title="素材"
          width="992px"
          visible={k === currentKey && visible}
          bodyStyle={{ padding: '5px 20px' }}
          style={{ top: 50 }}
          onCancel={this.handleCancel}
          footer={choosen && choosen.length === 1 ? [
            <Button key="cutpic" onClick={this.handleToCutpic}>抠图</Button>,
            <Button key="cropper" onClick={this.handleToCropper} style={{ marginRight: 20 }}>裁图</Button>,
            <Button key="cancel" onClick={this.handleCancel}>取消</Button>,
            <Button type="primary" key="ok" onClick={this.handleOk}>确定</Button>,
          ] : [
            <Button key="cancel" onClick={this.handleCancel}>取消</Button>,
            <Button type="primary" key="ok" onClick={this.handleOk}>确定</Button>,
          ]}
        >
          <Tabs defaultActiveKey="album" onChange={this.changeTab} activeKey={this.state.activeKey}>
            {this.props.k !== 'material' &&
              <TabPane tab={<span><Icon type="picture" />素材库</span>} key="album">
                <Card bordered={false} bodyStyle={{ padding: 0 }}>
                  {/* <div style={{ width: 140, height: '100%', float: 'left' }}>
                    <p style={{ height: 40, lineHeight: '40px', borderRight: '1px solid #e8e8e8' }}>我的图片</p>
                    <Menu
                      style={{ height: 320 }}
                      defaultSelectedKeys={['0']}
                      onClick={this.handleChangeAlbumMenu}
                    >
                      { categoryList.map((item, index) => {
                        return <Menu.Item key={index.toString()}>
                            {item.name}
                          </Menu.Item>
                        })
                      }
                    </Menu>
                  </div> */}
                  <Spin spinning={loading}>
                    <div style={{ width: /* 810 */'100%', height: 320, float: 'left', overflow: 'auto' }}>
                      {itemList.map((item, index) => this.renderPhoto(item, index))}
                    </div>
                    <Pagination
                      {...pagination}
                      onChange={this.changeAlbumPage}
                      style={{ float: 'right', margin: '10px 20px' }}
                    />
                  </Spin>
                </Card>
              </TabPane>
            }
            <TabPane tab={this.props.k !== 'material' ? <span><Icon type="upload" />上传</span> : ''} key="upload">
              <div>
                <div className={styles.uploadInpBox}>
                  <div className={styles.uploadViewBox}>
                    <Icon type="plus" style={{ fontSize: 32, color: '#6AF' }} />
                    <p>直接拖拽文件到虚线框内即可上传</p>
                  </div>
                  <input className={styles.fileInp} type="file" accept="image/*" onChange={this.handleUpload} ref={(el) => { this.fileInp = el; }} />
                </div>
                <p style={{ fontSize: 12 }}>请选择大小不超过 3 MB 的文件</p>
                <div className={styles.previewBox}>
                  {choosen.map(this.previewPhoto)}
                </div>
              </div>
            </TabPane>
          </Tabs>
        </Modal>
        { k === currentKey &&
          <CropperModal k={currentKey} onOk={this.handleCropperOk} />
        }
        { k === currentKey &&
          <CutpicModal k={currentKey} onOk={this.handleCutpicOk} />
        }
      </div>
    );
  }
}
